<template>
  <CommonPanel title="告警事件类型统计" :loading="loading">
    <template #opt>
      <div>
        <CustomBtn active @click="seeMore()">查看全部</CustomBtn>
      </div>
    </template>
    <div class="rank-box">
      <RankItem class="rank-box_item" v-for="item of lists" :key="item.name" :info="item" />
    </div>
    <Teleport to="body">
      <CommonDialog v-model:visible="visible" title="查看全部" @update:visible="closeOpen()">
        <ScrollTable :columns="columns" :tableData="copyList" />
      </CommonDialog>
    </Teleport>
  </CommonPanel>
</template>

<script setup>

import RankItem from "../components/rank-item.vue";
import {  ref, watch } from "vue";
import monitorOne from "../../../utils/monitorOne";
const props = defineProps({
  dataList: {
    type: Array,
    default: () => [],
  },
});

const loading = ref(false);
const visible = ref(false);
const columns = [
  { label: "排名", prop: "index" },
  { label: "事件类型", prop: "name" },
  { label: "次数", prop: "num" },
];
let lists = ref([
  { name: "1", num: 20 },
  { name: "2", num: 30 },
  { name: "3", num: 40 },
  { name: "4", num: 40 },
  { name: "5", num: 40 },
]);
let copyList = ref([]);


watch(
  () => props.dataList,
  () => {
    let maxNum = 0
    props.dataList.forEach((i, v) => {
      if (v === 0) {
        maxNum = i.num
      }
      i.maxNum = maxNum
      i.index = v + 1
    })
    lists.value = props.dataList.slice(0, 5);
    copyList.value = props.dataList
  }
);
const seeMore = () => {
  visible.value = true;
  console.log("关闭监控")
  monitorOne.undataHtml();
};

const closeOpen=()=>{
  console.log("打开监控")
  monitorOne.openDataHtml()
}

</script>

<style lang="scss" scoped>
.rank-box {
  height: 100%;
  display: flex;
  padding: 16px 6px;
  flex-direction: column;
  box-sizing: border-box;

  &_item {
    flex: 1;
  }
}

::v-deep {
  .content-box {
    width: 50% !important;
  }
}
</style>
